import React from 'react';
import moment from 'moment';
import './imgRecord.scss';
import api from 'js/api/index';
import { List } from 'antd-mobile';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import { SelectDate, SelectDateComponent } from 'views/component/selectDate/selectDate';
import InfiniteScroll from 'react-infinite-scroller';
import { i18n } from 'js/core/i18n';

let pagesize = 10;
class ImgRecord extends React.Component {
  constructor(props) {
    super(props)
    this.query = {
      ShopId: props.modelData ? props.modelData.id : null,
      start: props.modelData ? props.modelData.start : moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: props.modelData ? props.modelData.end : moment().format('YYYY-MM-DD'),
      pagesize: pagesize,
      pageindex: 1,
    }
    this.state = {
      shop: {},
      data: [],
      start: props.modelData ? props.modelData.start : moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: props.modelData ? props.modelData.end : moment().format('YYYY-MM-DD'),
      hasMore: false
    }
  }
  componentDidMount() {
    this.ShopList();
  }
  ShopList = () => {
    api('/BaseSet/ShopList').then(data => {
      let shop = data.data[0];
      this.query.ShopId = shop.ShopId;
      this.setState({ shop: shop, ShopIdList: data.data, hasMore: true })
    });
  }
  shopNameOnChange = (shopInfo) => {
    this.query.ShopId = shopInfo.ShopId;
    this.query.pageindex = 1;
    this.setState({ data: [], hasMore: true, shop: shopInfo })
  }
  loadMore = (event) => {
    if (this.state.hasMore) {
      api('/Monitoring/CheckImgListPage', this.query).then((data) => {
        this.query.pageindex += 1;
        this.state.data = this.state.data.concat(data.data);
        if (data.data.length < pagesize) {
          this.setState({ data: this.state.data, hasMore: false })
        } else {
          this.setState({ data: this.state.data })
        }
      });
    }
  }
  dateSelect = () => {
    this.refs.selectDate.show()
  }
  complete = (begin_date, end_date) => {
    this.query.pageindex = 1;
    this.setState({
      start: begin_date,
      end: end_date,
      data: [], hasMore: true
    })
  }
  render() {
    let { shop, hasMore, data, start, end } = this.state;
    return <div id="imgRecord" className="flex-col">
      {/* <div className="device-container">
        <List className="picker-list mb20">
          <div className="deviceItem device-border flex-vcenter">
            <SelectTitle classStyle="name">{i18n.get('店铺')}</SelectTitle>
            <SubViewLink moduleName="shopSearch" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择店铺')}
              modelData={{ onChange: this.shopNameOnChange }}>
              {shop ? shop.ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}
            </SubViewLink>
          </div>
          <SelectDateComponent className="deviceItem device-border flex-vcenter" value={[start, end]} onChange={(value) => { this.dateOnChange(value) }}>
            <SelectTitle classStyle="add-group">{i18n.get('时段选择')}</SelectTitle>
            <div className="flex-g-1 text-right deviceItemContent">
              {start}-{end}
            </div>
          </SelectDateComponent>
        </List>
      </div> */}

      <div className="flex-g-1 scroll-absolute">

        <InfiniteScroll
          pageStart={0}
          useWindow={false}
          loadMore={this.loadMore}
          hasMore={hasMore}
          threshold={50}
        >
          <div className="flex wrap">
            {data.map((listItem) => {
              return <img src={listItem.ImgPath} />
            })}
          </div>
        </InfiniteScroll>

      </div>
    </div>
  }
}

export default ImgRecord;